<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div style="background-color: #ffffff" id="app" v-cloak>
                    <div class="preview" style="padding:0 30px">
                        <div class="widget-head am-cf">
                            <a href="JavaScript:history.go(-1)" class="  ml-10  bg-green-300 px-2 py-2  rounded-lg">返回
                            </a>
                            <div class="widget-title am-fl">查看问卷模板</div>

                        </div>
                        <div style="margin:10px auto;text-align:center;color:#00d297;"><h2>{{title}}</h2></div>
                        <div style="margin:10px auto;color:#333333;"><pre style="word-break: break-all;word-wrap: break-word">{{header_note}}</pre>
                        </div>
                        <el-divider></el-divider>
                        <!-- <el-descriptions class="margin-top" :column="3" border>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-data-board"></i>
                                    及格分数
                                </template>
                                {{pass_mark}}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-data-line"></i>
                                    满分
                                </template>
                                {{full_mark}}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    <i class="el-icon-view"></i>
                                    显示模式
                                </template>
                                {{mode[show_mode]}}
                            </el-descriptions-item>
                        </el-descriptions>
                        <el-form ref="form" label-width="80px" class="bg-gray-300 px-10 py-5">
                            <h1 class="flex items-center justify-center"><span>处理问卷区域</span></h1>
                            <el-form-item label="分数" class="my-10">
                                <el-input
                                        type="text"
                                        v-model="postData.mark"
                                        placeholder="请输入分数"
                                        style="width:15em;"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="问卷回复">
                                <el-input
                                        type="textarea"
                                        v-model="postData.note"
                                        placeholder="请输入问卷回复"
                                        autosize
                                ></el-input>
                            </el-form-item>
                            <div class="flex items-center justify-center">
                                <div style="background-color: #00d297;  color: white;font-weight: 600;
                                     cursor: pointer;    "
                                     class="px-5 py-3 "
                                     @click="submit">
                                    <i class="el-icon-check " ></i>提交处理
                                </div>
                            </div>

                        </el-form> -->
                 
                        <div v-show="jumpShow[index]" v-for="(item3,index) in format" :key="item3.name">
                            <h1>
                                {{index + 1}}.{{item3.name}}({{questionTypeName[item3.type]}})({{item3.necessary ? "必做" : "选做"}})</h1>
                            <div class="px-20 ">

                                <span style="font-size:16px;margin:20px 10px;color:#00aeff;"
                                      v-if="item3.note">(提示：{{ item3.note }}）</span>
                                <div v-if="item3.type==0" style="margin:10px 0;">
                                    <el-radio
                                            :value="(findAnswer(index)!=-1)?item3.option[qData[findAnswer(index)].choice]:null"
                                            :label="item4"
                                            v-for="(item4,index4) in item3.option" border size="medium"
                                    >{{item4}}<u v-if="item3.other_option==index4"
                                                 class=" px-5">{{qData[findAnswer(index)].other_str}}</u>
                                    </el-radio>

                                </div>
                                <div v-if="item3.type==1" style="margin:0 0 10px 0;">
                                    <el-radio
                                            :value="(findAnswer(index)!=-1)&&(hasStr(qData[findAnswer(index)].choice_list,index4) >-1)?item4:null"
                                            border
                                            :label="item4"
                                            v-for="(item4,index4) in item3.option" size="medium">
                                        {{item4}}<u v-if="item3.other_option==index4"
                                                    class=" ">{{qData[findAnswer(index)].other_str}}
                                                    </u>
                                                    </el-radio>
                                </div>
                                <div v-if="item3.type==2" style="margin:10px 0;">
                                    <i v-for="(item5,index4) in item3.text_list"
                                       style="margin:10px 0;display:inline-block;"><i
                                                v-if="item5!='$'"
                                                style="font-size:18px;font-style: normal;">{{item5}}</i>
                                        <textarea
                                                disabled
                                                :value="(findAnswer(index)!=-1)?qData[findAnswer(index)].answer_list[getDollarNum(index4,item3.text_list)]:null"
                                                v-if="item5=='$'"
                                                wrap="off"
                                                style="width:auto;border:solid 1px #f00; border-radius:20px;padding: 0 5px;height:2em;border;margin:0 15px 0 10px;font-style: normal;">
                                        </textarea>
                                    </i>
                                </div>
                                <div v-if="item3.type==3" style="margin:10px 0;">
                                    <el-row :gutter="0">
                                        <el-col :span="6">
                                            <el-input placeholder="请输入内容"
                                                      :value="(findAnswer(index)!=-1)?qData[findAnswer(index)].answer:null"></el-input>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div v-if="item3.type==4" style="margin:10px 0;" class="select-preview">
                                    <el-row>
                                        <el-col :span="20">
                                            <el-row :gutter="0"
                                                    style="background-color:#d7d7d7;text-align:center;padding:20px;border-radius:5px 5px 0 0;">
                                                <el-col :span="spanLength(item3.option.length)">选项</el-col>
                                                <el-col :span="spanLength(item3.option.length)"
                                                        v-for="item7 in item3.option">{{item7}}
                                                </el-col>
                                            </el-row>
                                            <el-row :gutter="0" v-for="(item5,index5) in item3.title_list" :name="item5"
                                                    style="padding:20px;text-align:center;border:1px solid #d7d7d7">
                                                <el-col :span="spanLength(item3.option.length)">{{item5}}</el-col>
                                                <el-col :span="spanLength(item3.option.length)"
                                                        v-for="(item7,index3) in item3.option">
                                                    <el-radio
                                                            :value="(findAnswer(index)!=-1)?item3.option[qData[findAnswer(index)].answer_list[index5]]:null"
                                                            :label="item7">&nbsp;
                                                    </el-radio>
                                                </el-col>
                                            </el-row>
                                        </el-col>
                                    </el-row>
                                </div>
                                <div v-if="item3.type==5" style="margin:10px 0;">
                                    <el-radio
                                            :value="(findAnswer(index)!=-1)?item3.option[qData[findAnswer(index)].choice]:null"
                                            :label="item4"
                                            v-for="item4 in item3.option" border size="medium">
                                        {{item4}}
                                    </el-radio>
                                </div>
                                <div v-if="item3.type == 6" style="margin: 20px 0">
                                    <el-radio
                                            :label="item4"
                                            :value="(findAnswer(index)!=-1)?item3.option[qData[findAnswer(index)].choice]:null"
                                            v-for="(item4, index4) in item3.option"
                                            border
                                            size="medium"
                                    >{{ item4
                                        }}
                                        ({{(parseInt(item3.jump[index4] + 1) == parseInt(index) + 2) ? "不跳转" : "选择此项将会跳转第" + (item3.jump[index4] + 1) + "题"}})
                                    </el-radio
                                    >
                                </div>

                                 <div v-if="item3.type==7" style="margin:10px 0;" class="select-preview">
                                    <el-row>
                                        <el-col :span="20">
                                         
                                            <el-row :gutter="0" v-for="(item5,index5) in item3.title_list" :name="item5"
                                                    style="padding:20px;text-align:center;border:1px solid #d7d7d7">
                                                <el-col :span="spanLength(item3.option.length)">{{item5}}</el-col>
                                                <el-col :span="spanLength(item3.option.length)"
                                                        >
                 <el-input placeholder="请输入内容"
                                                      :value="(findAnswer(index)!=-1)?qData[findAnswer(index)].answer_list[index5]:null"></el-input>
                                                </el-col>
                                            </el-row>
                                        </el-col>
                                    </el-row>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="__CDN__/assets/js/vue.min.js"></script>

<!-- 引入样式 -->
<link rel="stylesheet" href="__CDN__/assets/css/element-ui-2.15.13.css">
<!-- 引入组件库 -->
<script src="__CDN__/assets/js/element-ui.2.15.13.js"></script>


<link rel="stylesheet" href="__CDN__/assets/css/amazeui.min.css" type="text/css">
<link rel="stylesheet" href="__CDN__/assets/css/tailwind.css" type="text/css">

<script>


    new Vue({
        el: '#app',
        data() {
            return {
                format: <?= json_encode($qModel['format'])?>,
                questionTypeName: <?=json_encode($questionTypeName) ?>,
                available: <?= ($qModel['available']) ? 'true' : 'false' ?>,
                full_mark: <?= (int)($qModel['full_mark']) ?>,
                pass_mark: <?= (int)($qModel['pass_mark']) ?>,
                title: "<?= ($qModel['name']) ?>",
                show_mode: <?= (int)($qModel['show_mode']) ?>,
                header_note: `<?= ($qModel['header_note']) ?>`,
                q_class_id: <?=$qModel['q_class_id']?>,
                class1: <?= json_encode($class)?>,
                mode: <?=json_encode($mode) ?>,
                jumpShow: [],
                qData: <?=json_encode($qData['data']) ?>,
                postData: {
                    note:" <?= (bool)$qData['note']?$qData['note']:""?>",
                    mark: <?=$qData['mark']?:'null'?>
                },
                id:<?= $qData['id'] ?>,
                qid:<?= $qData['qid'] ?>
            }
        },
        computed: {
            spanLength() {
                return function (length) {
                    return Math.floor(24 / (length + 1))
                };
            }, type() {
                for (let i = 0; i < this.class1.length; i++) {
                    if (this.class1[i].q_class_id == this.q_class_id) {
                        return this.class1[i].name
                    }
                }
                return '暂未选择分类'
            }
        }
        , created() {
            var that = this;
            var jumpTo = -1;
           
            this.format = JSON.parse( this.format)
            this.qData = JSON.parse( this.qData)
            console.log(this.format)
            console.log('qData',this.qData)
            this.format.forEach(function ($v, $k) {
                console.log(jumpTo)
                if (jumpTo > $k) {
                    that.jumpShow.push(false);
                } else {
                    that.jumpShow.push(true);
                    if ($v.type == 6) {
                        jumpTo = $v.jump[that.qData[that.findAnswer($k)].choice];
                    }
                }
            });
        },
        methods: {
            hasStr :function(obj,str){
                
                return obj.toString().indexOf(str);
            },
            findAnswer: function (id) {
                var that = this;
                var returnIndex = -1;
                this.qData.forEach(function (item, index) {
                    if (parseInt(item.id) === parseInt(id)) {
                        returnIndex = index;
                    }
                });
                return returnIndex;

            },
            getDollarNum: function (index, textList) {
                var count = -1;
                textList.forEach(function (v, k) {
                    if (k <= index && v === "$") {
                        count++;
                    }
                });
                return count;
            },
            submit:function (){
                var that = this;
                layer.confirm('确认提交？', function (index) {
                    $.post("__CDN__/FQfZvLoCyH.php/question_format/dealDoneQuestionnaire", {postData: JSON.stringify(that.postData),id:that.id,qid:that.qid}, function (result) {
                        if(result.code == '1'){
                            Layer.msg('操作成功');
                            window.history.back()
                        }else{
                            Layer.msg(result.msg);
                        
                        }
                        return ;
                    });
                    layer.close(index);
                });
            }
        }

    })
</script>
<style>
    .preview .el-col {
        font-weight: 600 !important;
    }

    .preview .el-radio__inner {
        border: 3px solid gray;
    }

    .select-preview .el-radio__label {
        display: none !important;
    }

    h1, h2, h3, h4, h5, h6 {
        margin: 0 0 1.6rem 0;
        font-weight: 600;
        font-size: 100%
    }

    h1 {
        font-size: 1.5em
    }
</style>
